<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="com.project.DB_Flight, com.project.DB_Airline, java.util.List, java.util.ArrayList, java.sql.Timestamp, java.time.LocalDateTime" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>航班查询</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/flightSearch.css">
    <script>
        function updateTable() {
            const fid = document.getElementById('fid').value;
            const starttime = document.getElementById('starttime').value;
            const endtime = document.getElementById('endtime').value;
            const takeoffstation = document.getElementById('takeoffstation').value;
            const arrivalstation = document.getElementById('arrivalstation').value;
            const boardingtime = document.getElementById('boardingtime').value;
            const position = document.getElementById('position').value;
            const page = document.getElementById('currentPage').value;

            const url = `getFlights?fid=` + fid + `&starttime=` + starttime + `&endtime=` + endtime + `&takeoffstation=` + takeoffstation + `&arrivalstation=` + arrivalstation + `&boardingtime=` + boardingtime + `&position=` + position + `&page=` + page;
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        try {
                            const response = JSON.parse(xhr.responseText);
                            const tableBody = document.getElementById('flightTableBody');
                            tableBody.innerHTML = '';

                            response.flights.forEach((flight, index) => {
                                const row = document.createElement('tr');
                                // 添加序号列（当前页内从1开始递增）
                                const serialCell = document.createElement('td');
                                serialCell.textContent = index + 1;
                                row.appendChild(serialCell);
                                
                                Object.values(flight).forEach(value => {
                                    const cell = document.createElement('td');
                                    cell.textContent = value;
                                    row.appendChild(cell);
                                });
                                tableBody.appendChild(row);
                            });

                            document.getElementById('currentPage').value = response.currentPage;
                            document.getElementById('totalPages').textContent = response.totalPages;
                        } catch (error) {
                            console.error('解析响应数据时出错:', error);
                        }
                    } else {
                        console.error('请求失败，状态码:', xhr.status);
                    }
                }
            };
            xhr.send();
        }

        function goToPage() {
            const pageInput = document.getElementById('currentPage');
            const page = pageInput.value;
            if (page) {
                updateTable();
            }
        }
    </script>
</head>
<body>
<%@ include file="userNavbar.jsp" %>

<div class="container mx-auto p-4 mt-16">
    <h1 class="text-3xl font-bold text-gray-800 mb-6 text-center">航班查询</h1>
    <div class="search-filters mb-6">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-gray-700 font-semibold mb-2">航班 ID</label>
                <input type="text" id="fid" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="请输入航班 ID" onblur="updateTable()">
            </div>
            <div>
                <label class="block text-gray-700 font-semibold mb-2">起飞时间</label>
                <input type="datetime-local" id="starttime" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" onblur="updateTable()">
            </div>
            <div>
                <label class="block text-gray-700 font-semibold mb-2">到达时间</label>
                <input type="datetime-local" id="endtime" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" onblur="updateTable()">
            </div>
            <div>
                <label class="block text-gray-700 font-semibold mb-2">起飞站</label>
                <input type="text" id="takeoffstation" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="请输入起飞站" onblur="updateTable()">
            </div>
            <div>
                <label class="block text-gray-700 font-semibold mb-2">到达站</label>
                <input type="text" id="arrivalstation" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="请输入到达站" onblur="updateTable()">
            </div>
            <div>
                <label class="block text-gray-700 font-semibold mb-2">登机时间</label>
                <input type="datetime-local" id="boardingtime" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" onblur="updateTable()">
            </div>
            <div>
                <label class="block text-gray-700 font-semibold mb-2">舱位</label>
                <input type="text" id="position" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="请输入舱位" onblur="updateTable()">
            </div>
        </div>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">航班 ID</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">舱位</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">剩余票数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">起飞时间</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">到达时间</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">起飞站</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">到达站</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">登机时间</th>
                </tr>
            </thead>
            <tbody id="flightTableBody" class="bg-white divide-y divide-gray-200">
                <!-- 航班数据将通过 JavaScript 动态填充 -->
            </tbody>
        </table>
    </div>
    <div class="mt-4 flex justify-end items-center">
        <span class="mr-2">当前页数：</span>
        <input type="number" id="currentPage" value="1" min="1" class="w-16 px-2 py-1 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" onblur="goToPage()">
        <span class="mx-2">/</span>
        <span id="totalPages">1</span>
        <button class="ml-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600" onclick="updateTable()">下一页</button>
    </div>
</div>

<script>
    // 页面加载时初始化表格
    window.onload = function() {
        updateTable();
    };
</script>
</body>
</html>